import React, { useState } from "react";

import { Button, Layout, Menu, theme } from "antd";
import { Outlet } from "react-router-dom";
import Aside from "../components/aside";
import MyHeader from "../components/header";
import MyTab from "../components/tab";
import { useSelector } from "react-redux";
const { Content } = Layout;

import { RouterAuth } from "../router/routerAuth";
const LayoutDom = () => {
  const [collapsed, setCollapsed] = useState(false);
  // 通过redux获取展开收起的状态
  const Collapsed = useSelector((state) => state.tab.isCollapse);
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();
  return (
    <RouterAuth>
      <Layout className="main-container">
        <Aside collapsed={collapsed} Collapsed={Collapsed}></Aside>
        <Layout>
          <MyHeader collapsed={collapsed} Collapsed={Collapsed} setCollapsed={setCollapsed}></MyHeader>
          <MyTab></MyTab>
          <Content style={{ margin: "24px 16px", padding: 24, minHeight: 280, background: colorBgContainer, borderRadius: borderRadiusLG }}>
            <Outlet />
          </Content>
        </Layout>
      </Layout>
    </RouterAuth>
  );
};

export default LayoutDom;
